<!-- 岗位维护 -->
<template>
  <div>
    <ChooseShow :menus="menus" @GetTableId="GetTableId" title='全部分类'>
      <div slot="operation" class="Head_Top">
        <div class="Top_one">
          <el-button @click="addgroup" size="small" type="primary">新增</el-button>
        </div>
        <div class="Top_two">
           <div class="Top_two_radio">
            <el-checkbox v-model="checked">已停用</el-checkbox>
          </div>
          <div class="Top_two_one">
           <el-input
            placeholder="请输入内容"
            v-model="listfrom.KeyWord">
            <i slot="suffix" @click="search" class="el-input__icon el-icon-search"></i>
          </el-input>
          </div>
        <div class="Top_two_two1">
          <el-button icon="el-icon-refresh" size="small" class="refresh" @click="getlistdata"></el-button>
          <!-- <i class="iconfont icon-shuaxin" @click="Toreload"></i> -->
        </div>
        </div>
        <!-- <el-button @click="modal12 = true" type="primary">点击编辑</el-button> -->
      </div>
      <div slot="table">
        <table-cmp
      style="width:100%"
      class="table_cmp"
        :loading="loading"
        :table-data="tableData"
        :table-label="tableLabel"
        @handleButton="handleButton"
        @rowClick="rowClick"
        @cellClick="cellClick"
        @handleSortChange="handleSortChange"
        @handleSelectionChange="handleSelectionChange"
      ></table-cmp>
      <div style="text-align: right;">
        <el-pagination
      v-if="tatolpage>10"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listfrom.PageIndex"
        layout=" prev, pager, next"
        :total="tatolpage">
      </el-pagination>
      </div>
      </div>
      
    </ChooseShow>
    <postmain ref="postmain"></postmain>
  </div>
</template>

<script>
var occupancyDisplay = {
  template: `<div>
            <el-button type="text" size="small" @click='start(row)' v-if='row.Status ==3'>启用</el-button>
            <el-button type="text" size="small" @click='stop(row)' v-if='row.Status ==2'>停用</el-button>
            <el-button type="text" size="small" @click='edit(row)' v-if='row.Status ==2'>编辑</el-button>
            <el-button type="text" size="small" @click='remove(row)' v-if='row.Status ==3'>删除</el-button>
  
  </div>`,
  props: ['row'],
  created() {
    },
  methods: {
    edit(row) {
      this.$emit('shenh-detail', row);
      // console.log(this.row,'1111111');
      
    },
    start(row) {
      // this.$emit('see-detail', row);
       this.$confirm('此操作将启用该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
            "MN": "UnCancelJobs",
            "RequestId": 1,
            "UserId": 1,
            "DataContent": {
              'Ids':this.row.Id
            }
          }
          this.MIX_send(obj);
        }).catch(() => {        
        });
      
    },
    remove(row) {
      // this.$emit('see-detail', row);
       this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
            "MN": "RemoveJobs",
            "RequestId": 1,
            "UserId": 1,
            "DataContent": {
              'Ids':this.row.Id
            }
          }
          this.MIX_send(obj);
        }).catch(() => {        
        });
      
    },
    stop(row) {
      // this.$emit('see-detail', row);
       this.$confirm('此操作将停用该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
            "MN": "CancelJobs",
            "RequestId": 1,
            "UserId": 1,
            "DataContent": {
              'Ids':this.row.Id
            }
          }
          this.MIX_send(obj);
        }).catch(() => {        
        });
      
    }
  }
};
var that;
import ChooseShow from "@/components/ChooseShow";
import postmain from "./dialog/postmain";
export default {
  name: "",
  data() {
    return {
      modal12: false,
      loading: false,
      checked: true,
      tatolpage: 0,
      arr:[],
      tableData: [],
       listfrom:{
        "OrganizationId":'',
        "KeyWord":'',
        "IsStop":'1',
        "PageSize":10,
        "PageIndex":1
      },
      tableLabel: [
        { label: '状态', param: 'Status', width: '100', align: 'center', sortable: false, render: (row) => {
           if (row.Status == 0) {
              return '草稿'
            } else if (row.Status == 1) {
              return '待审批'
            } else if (row.Status == 2) {
              // 审核通过
              return '启用'
            } else if (row.Status == 3) {
              // 作废
              return '停用'
            } else if (row.Status == 4) {
              return '删除'
            }
          }
        },
        { label: '编号', param: 'No', align: 'center',width: '100', sortable: false },
        { label: '名称', param: 'Name', align: 'center',width: '100', sortable: false },
        { label: '隶属部门', param: 'OrganizationName', align: 'center',width: '100', sortable: false },
        { label: '直接上级', param: 'SuperiorName', align: 'center',width: '100', sortable: false },
        { label: '登陆方式', param: 'LoginMethod', align: 'center', width: '100' ,render: (row) => {
            if (row.LoginMethod == 1) {
              return '账号'
            } else if (row.LoginMethod == 2) {
              return '人脸'
            } else if (row.LoginMethod == 3) {
              return 'ID卡'
            } else if (row.LoginMethod == 4) {
              return '指纹'
            }
          }
          },
        { label: '描述', param: 'Desc', align: 'center'},
        { label: '操作', align: 'center', width: '300',
           component:occupancyDisplay,listeners:{
            'shenh-detail'(row) {
              that.dyapiDetail(row);
            },
          }
      }
      ],
      fromData: {},
      columns: [],
      menus: [],
      postmainoption: [],
    };
  },
  components: {
    postmain,
    ChooseShow
  },
  watch: {
    "checked":function (params) {
      this.getlistdata()
    },
    "$store.state.Humanmanage.QueryJobs":function (data){
      if (data.RequestId ==1) {
        let DataContent = data.ReturnData.DataCount;
        this.tableData = data.ReturnData.Data;
        this.tatolpage = data.ReturnData.DataCount;
          // this.postmainoption = JSON.parse(JSON.stringify(data.ReturnData.Data));
        }
    },
    "$store.state.Humanmanage.QueryOrganizationTree": function (data) {
      this.menus = data.ReturnData;
    },
    "$store.state.Humanmanage.CancelJobs": function (data) {
       this.$message({
            type: 'success',
            message: '操作成功!'
          });
      this.getlistdata();
    },
    "$store.state.Humanmanage.UnCancelJobs": function (data) {
      this.$message({
            type: 'success',
            message: '操作成功!'
          });
      this.getlistdata();
    },
    "$store.state.Humanmanage.RemoveJobs": function (data) {
      this.$message({
            type: 'success',
            message: '操作成功!'
          });
      this.getlistdata();
    },
  },
  methods: {
    dyapiDetail(row){
      this.$refs.postmain.dialogFormVisible = true;
      // this.$refs.postmain.postmainoption = this.postmainoption;
      let data = this.removechild(this.menus);
      this.$refs.postmain.menus = this.menus;
      let arr = []
      // console.log(data);
      this.getId(row.OrganizationId,this.menus,arr);
      // console.log(row);
      // console.log(this.arr);
      this.$refs.postmain.listfrom = JSON.parse(JSON.stringify(row));
      this.$refs.postmain.value = this.arr;
      this.$refs.postmain.formtype = 2;
      this.$refs.postmain.orangchange();
    },
    // 添加组
    addgroup(){
      this.$refs.postmain.dialogFormVisible = true;
      // this.$refs.postmain.postmainoption = this.postmainoption;
      let data = this.removechild(this.menus);
      console.log(data);
      this.$refs.postmain.menus = this.menus;
      this.$refs.postmain.formtype = 1;
    },
    getId(str,array,arr){
        for (let index = 0; index < array.length; index++) {
          const item = array[index];
          if (item.Id == str) {
            arr.push(item.Id)
            // console.log(arr)
            this.arr = arr
            return
          }
          if (item.Children && item.Children.length > 0) {
            let arr01 = JSON.parse(JSON.stringify(arr))
            arr01.push(item.Id);
            this.getId(str,item.Children,arr01);
          }
        }
      },
    removechild(data){
      data.forEach((item,index) => {
        if (item.Children && item.Children.length > 0) {
          this.removechild(item.Children);
        } else {
          delete item.Children;
        }
      });
      return data;
    },
    getlistdata(){
      // let obj1 = {
      //       "MN":"QueryJobs",
      //       "RequestId":1,
      //       "UserId":1,
      //       "DataContent":{
      //         "IsStop":'1'
      //       }
      //      }
      //        this.MIX_send(obj1);
      if (this.checked) {
        delete this.listfrom.IsStop;
      } else {
        this.listfrom.IsStop = '1';
      }
      let obj = {
            "MN":"QueryJobs",
            "RequestId":1,
            "UserId":1,
            "DataContent":this.listfrom
           }
             this.MIX_send(obj);
    },
    getlistdatatree(){
      let obj = {
            "MN":"QueryOrganizationTree",
            "RequestId":1,
            "UserId":1,
            "DataContent":{}
           }
             this.MIX_send(obj);
    },
    rowClick(data){},
    handleCurrentChange(data){
      this.listfrom.PageIndex = data;
      this.getlistdata();
    },
    handleSizeChange(data){
      // console.log(data,'handleSizeChange');
      this.listfrom.PageSize = data;
      this.getlistdata();
    },
    handleButton(data){},
    cellClick(data){},
    handleSortChange(data){},
    handleSelectionChange(data){},
    GetTableId(data){
      this.listfrom.PageIndex = 1;
      if (data =='All') {
        this.listfrom.OrganizationId = '';
      } else{
        this.listfrom.OrganizationId = data.Id;
      }
        this.getlistdata();
    },
    Toreload(){
      this.getlistdata();
    },
    search(){
      this.getlistdata();
    },
    // 表格上方筛选slot的事件回调
    add() {
      console.log("表格上方筛选slot的事件回调");
    },
    // 弹出框表单提交
    Commit() {
      console.log(this.$refs.PopForm.value);
    },
    // 弹出框底部标签页组件事件的回调
    edit(val) {
      console.log(val);
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    that = this;
    this.getlistdata();
    this.getlistdatatree();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>

<style lang="less" scoped>
.Head_Top{
  width: 100%;
  height: 51px;
  // overflow: hidden;
  display: flex;
  justify-content: space-between;
  .Top_one{
    width: 100px;
  }
  .Top_two{
    // flex: 1;
    display: flex;
    .Top_two_two{
      padding: 10px;
    }
  }
  .Top_three{
    width: 50px;
  }
}
</style>